<template>
    <div class="faceWrapper">
        <HandAni></HandAni>
        <div class="wrapper" :class="{smaller: isSmaller}">
          <div class="anim-box">
            <div class="face" :class="[{primary: isPrimary}, {symmetry: !isPrimary}]"></div>

            <div class="camera"></div>
            <div class="faceLight1" v-show="Light"></div>
            <div class="faceLight2" v-show="Light"></div>
            <div class="flashlight" :class="{flashlightMove: showLight}" v-show="showLight"></div>

            <div v-for="star in stars" :class="[`star${star}`, {star: hideIndex == star}]"></div>
            <div v-for="text in stars" :class="[`text${text}`, {showText: showText >= text}]" class="text"></div>

            <div class="btn" @touchend="toJie()"></div>
          </div>
        </div>
    </div>
</template>

<script>
    import HandAni from './handAni.vue';
    import Icon from './icon.vue';

    export default {
        props: ['resources', 'pageType', 'jieImg'],
        data() {
            return {
                isPrimary: false,
                hideIndex: 0,
                showText: 0,
                showHand: false,
                stars: [1, 2, 3, 4, 5],
                showLight: false,
                Light: false,
              isSmaller: false,
            }
        },
        mounted() {


          var clientWidth = document.documentElement.clientWidth;
          var clientHeight = document.documentElement.clientHeight;
          this.isSmaller = clientWidth/clientHeight > 0.66 ? true : false;

          this.toggleFace();
            this.tinkle();
            this.textAni();
            this.showHands();
            setTimeout(() => {
                this.showLight = true;
                setInterval(() => {
                    this.Light = this.Light ? false : true;
                }, 250);
            }, 1000);

        },
        methods: {
            toggleFace() {
                setInterval(() => {
                    this.isPrimary = this.isPrimary ? false : true;
                }, 500);
            },
            tinkle() {
                setTimeout(() => {
                    setInterval(() => {
                        let index = Math.floor(Math.random() * 5) + 1;
                        this.hideIndex = index;
                    }, 500);
                }, 1000);
            },
            textAni() {
                setTimeout(() => {
                    setInterval(() => {
                        this.showText = (this.showText === 6) ? 0 : this.showText + 1;
                    }, 100);
                }, 1000);
            },
            showHands() {
                setTimeout(() => {
                    this.showHand = true;
                }, 2000);
            },
            toJie() {
                console.log('jie', this.jieImg);
                this.$emit('update:pageType', 'jie');
                this.$emit('update:jieImg', 'faceJie');
            }
        },
        components: {
            HandAni,
            Icon
        }
    }
</script>
<style lang="less" scoped>
    .faceWrapper {
        height: 100%;
        width: 100%;
        background-image: url("../../img/index/background.jpg");
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: bottom;
        overflow: hidden;
        .wrapper {
            height: 100%;
            width: 100%;
            background-image: url("../../img/face/faceText.png");
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: bottom;
            position: absolute;
          .anim-box {
            position: absolute;
            top: 0.8rem;
            width: 100%;
            height: 100%;
            .face {
              width: 2.81rem;
              height: 3.23rem;
              background-image: url("../../img/face/handImg.png");
              background-size: 100%;
              background-repeat: no-repeat;
              position: absolute;
              bottom: 6.95rem;
              left: 3.57rem;
            }
            .primary {
              transform: rotateY(0deg);
            }
            .symmetry {
              transform: rotateY(180deg);
            }
            .btn {
              width: 2.56rem;
              height: 2.56rem;
              position: absolute;
              left: 3.71rem;
              bottom: 1.9rem;
            }

            .star1 {
              width: 0.55rem;
              height: 0.61rem;
              position: absolute;
              bottom: 7.61rem;
              left: 1.2rem;
              background-image: url("../../img/face/star1.png");
              background-size: 100%;
              background-repeat: no-repeat;
            }
            .star2 {
              width: 0.89rem;
              height: 1.17rem;
              position: absolute;
              left: 2.33rem;
              bottom: 8.11rem;
              background-image: url("../../img/face/star2.png");
              background-size: 100%;
              background-repeat: no-repeat;
            }
            .star3 {
              width: 0.71rem;
              height: 0.77rem;
              position: absolute;
              left: 2.87rem;
              bottom: 9.28rem;
              background-image: url("../../img/face/star3.png");
              background-size: 100%;
              background-repeat: no-repeat;
            }
            .star4 {
              width: 0.63rem;
              height: 0.64rem;
              position: absolute;
              left: 6.91rem;
              bottom: 8.81rem;
              background-image: url("../../img/face/star4.png");
              background-size: 100%;
              background-repeat: no-repeat;
            }
            .star5 {
              width: 0.75rem;
              height: 0.87rem;
              position: absolute;
              left: 7.39rem;
              bottom: 7.95rem;
              background-image: url("../../img/face/star5.png");
              background-size: 100%;
              background-repeat: no-repeat;
            }
            .star {
              -webkit-animation: showStar 1s;
              animation: showStar 1s;
            }
            @keyframes showStar {
              0% {
                opacity: 0.5;
                transform: scale(0.5);
              }
              100% {
                opacity: 1;
                transform: scale(1);
              }
            }
            @-webkit-keyframes showStar {
              0% {
                opacity: 0.5;
                transform: scale(0.5);
              }
              100% {
                opacity: 1;
                transform: scale(1);
              }
            }
            .hideStar {
              opacity: 0.5;
              transform: scale(0.5);
            }

            .faceLight1 {
              width: 0.51rem;
              height: 0.48rem;
              background-image: url("../../img/face/lightFace1.png");
              background-size: 100%;
              background-repeat: no-repeat;
              position: absolute;
              bottom: 9.95rem;
              left: 2.1rem;
            }
            .faceLight2 {
              width: 0.25rem;
              height: 0.47rem;
              background-image: url("../../img/face/lightFace2.png");
              background-size: 100%;
              background-repeat: no-repeat;
              position: absolute;
              bottom: 8.55rem;
              left: 1.57rem;
            }
            .flashlight {
              width: 0.68rem;
              height: 0.69rem;
              position: absolute;
              left: 1.13rem;
              bottom: 9.91rem;
              background-image: url("../../img/face/flashlight.png");
              background-size: 100%;
              background-repeat: no-repeat;
            }
            .flashlightMove {
              -webkit-animation: showFlashlight 0.3s;
              animation: showFlashlight 0.3s;
            }
            @keyframes showFlashlight {
              0% {
                left: 0.826rem;
                bottom: 9.67rem;
                opacity: 0;
              }
              76% {
                opacity: 0;
              }
              100% {
                transform: translate3d(-2px, 2px, 0);
                opacity: 1;
              }
            }
            @-webkit-keyframes showFlashlight {
              0% {
                left: 0.826rem;
                bottom: 9.67rem;
                opacity: 0;
              }

              76% {
                opacity: 0;
              }

              100% {
                transform: translate3d(-2px, 2px, 0);
                opacity: 1;
              }
            }

            .camera {
              width: 1.39rem;
              height: 1.2rem;
              position: absolute;
              left: 0.49rem;
              bottom: 9.05rem;
              background-image: url("../../img/face/camera.png");
              background-size: 100%;
              background-repeat: no-repeat;
              -webkit-animation: showCamera 1s;
              animation: showCamera 1s;
            }
            @keyframes showCamera {
              0% {
                left: -1.4rem;
                bottom: 10.95rem;
              }
              100% {
                left: 0.49rem;
                bottom: 9.05rem;
              }
            }
            @-webkit-keyframes showCamera {
              0% {
                left: -1.4rem;
                bottom: 10.95rem;
              }
              100% {
                left: 0.49rem;
                bottom: 9.05rem;
              }
            }

            .text1 {
              width: 0.52rem;
              height: 0.51rem;
              position: absolute;
              bottom: 7.16rem;
              left: 6.64rem;
              background-image: url("../../img/face/text1.png");
              background-size: 100%;
              background-repeat: no-repeat;
            }
            .text2 {
              width: 0.53rem;
              height: 0.52rem;
              position: absolute;
              bottom: 6.97rem;
              left: 7.16rem;
              background-image: url("../../img/face/text2.png");
              background-size: 100%;
              background-repeat: no-repeat;
            }
            .text3 {
              width: 0.53rem;
              height: 0.51rem;
              position: absolute;
              bottom: 7.03rem;
              left: 7.69rem;
              background-image: url("../../img/face/text3.png");
              background-size: 100%;
              background-repeat: no-repeat;
            }
            .text4 {
              width: 0.5rem;
              height: 0.51rem;
              position: absolute;
              bottom: 6.95rem;
              left: 8.22rem;
              background-image: url("../../img/face/text4.png");
              background-size: 100%;
              background-repeat: no-repeat;
            }
            .text5 {
              width: 0.2rem;
              height: 0.36rem;
              position: absolute;
              bottom: 6.95rem;
              left: 8.77rem;
              background-image: url("../../img/face/text5.png");
              background-size: 100%;
              background-repeat: no-repeat;
            }
            .text {
              display: none;
            }
            .showText {
              display: block;
            }
          }
        }
        .smaller{
            top: 1.1rem;
        }
    }
</style>
